<template>
  <div class="app-container root">
    <div class="normal-font">
      右键菜单进行编辑
    </div>
    <el-row style="margin-top: 10px;height:100px;flex-grow: 1" :gutter="10">
      <el-col :span="4" style="height: 100%">
        <el-card style="height: 100%;overflow-y: auto;overflow-x: auto" shadow="never" body-style="padding:10px">
          <div>
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
            </el-input>

            <el-tree
              class="filter-tree"
              style="margin-top: 5px"
              :data="data"
              :props="defaultProps"
              node-key="id"
              default-expand-all
              @node-contextmenu="contextmenu"
              @node-click="nodeClick"
              accordion
              :filter-node-method="filterNode"
              ref="tree">
              <span slot-scope="{ node, data }">
                <span :style="formatStyle(data)">
                  <span>{{ data.name }}</span>
                  <span v-if="data.level!=3">({{ data.num }})</span>
                  <span v-if="node.isLeaf && data.isStop=='1'">(已停用)</span>
                </span>
              </span>
            </el-tree>
          </div>
        </el-card>
      </el-col>
      <el-col :span="20" style="height: 100%">
        <div v-if="chooseData" style="height: 100%">
          <EquipmentDetail style="height: 100%" v-if="chooseData.level==3" :data-form="equipmentForm"/>
          <el-card style="height: 100%" shadow="never" v-else>
            <div class="content-info" style="height: 100%">
              <div>{{ chooseData.name }}统计数据</div>
              <div v-if="chooseData.level==0" style="margin-top: 10px">
                <span>模块数量（个）：</span>
                <span>{{ detailData.moduleNum }}</span>
              </div>
              <div v-if="chooseData.level==0||chooseData.level==1">
                <span>分类数量（类）：</span>
                <span>{{ detailData.classifyNum }}</span>
              </div>
              <div v-if="chooseData.level==0||chooseData.level==1||chooseData.level==2">
                <span>器材种数（种）：</span>
                <span>{{ detailData.typeNum }}</span>
              </div>
              <!-- <div v-if="chooseData.level==0||chooseData.level==1||chooseData.level==2||chooseData.level==3">
                <span>器材数量（件）：</span>
                <span>{{ detailData.equipmentNum }}</span>
              </div> -->
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      center
      :title="typeDialogTitle"
      v-if="typeDialogVisible"
      :visible.sync="typeDialogVisible"
      width="420px">
      <el-form ref="typeRuleForm" :model="dataForm" :rules="$rules.equipmentTypeRules" label-width="100px">
        <el-form-item label="分类名称" prop="name" v-if="typeDialogTitle=='新增器材分类'">
          <el-input v-model="dataForm.name" style="width: 250px" placeholder="请输入分类名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="primary" v-if="typeDialogTitle == '新增器材分类'" @click="saveTypeData()">提交</el-button>
        <el-button @click="typeDialogVisible = false">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="equipmentDialogTitle"
      v-if="equipmentDialogVisible"
      :visible.sync="equipmentDialogVisible"
      top="60px"
      width="1420px">
      <div style="width: 100%;height: 620px">
        <EquipmentDetail
          style="height: 100%"
          @onCancel="equipmentDialogVisible = false"
          @onConfirm="saveData"
          :data-form="addEquipmentForm"
          :is-read-only="false"/>
      </div>
    </el-dialog>

    <div id="perTreeMenu" v-if="tmDisplay" class="tree-right-menu" :style="{...treeRightMenu}">
      <el-button
        type="danger"
        v-permission="['base_manage_type_stop']"
        v-if="rightSelectData.level==3||!rightSelectData.children||rightSelectData.children.length==0"
        @click="onSetStop(rightSelectData)">停用
      </el-button>
      <el-button type="primary" v-permission="['base_manage_type_add']" v-if="rightSelectData.level==2" @click="onAdd(rightSelectData)">新增器材</el-button>
      <el-button
        type="primary"
        v-permission="['base_manage_type_add']"
        v-if="rightSelectData.level==1"
        @click="onAddType(rightSelectData)">新增分类
      </el-button>
      <el-button
        type="primary"
        v-permission="['base_manage_type_add']"
        v-if="rightSelectData.level==0"
        @click="onAddType(rightSelectData)">新增模块
      </el-button>
    </div>
  </div>
</template>

<script>
import {
  getBaseEquipmentType,
  setEquipmentStop,
  addEquipmentType,
  queryDetailById,
  queryEquipmentDetailById
} from '@/api/warehouse'

import EquipmentDetail from '../../components/EquipmentDetail'

export default {
  name: 'Equipment',
  components: {
    EquipmentDetail
  },
  data() {
    return {
      typeDialogTitle: '新增器材分类',
      typeDialogVisible: false,
      equipmentDialogTitle: '新增器材',
      equipmentDialogVisible: false,
      chooseData: null,
      detailData: null,
      treeRightMenu: {},
      tmDisplay: false,
      rightSelectData: null,
      filterText: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dataForm: {
        name: ''
      },
      addEquipmentForm: {
        name: '',
        model: '',
        modelName: '',
        parentId: '',
        category: '',
        labelType: '',
        labelTypeName: '',
        installMethod: '',
        installMethodName: '',
        labelSize: '',
        labelSizeName: '',
        labelWay: '',
        labelWayName: '',
        equipmentGuide: '',
        equipmentImg: '',
        labelInstallImg: ''
      },
      equipmentForm: {
        name: '',
        model: '',
        modelName: '',
        parentId: '',
        equipmentTypeId: '',
        category: '',
        labelType: '',
        labelTypeName: '',
        installMethod: '',
        installMethodName: '',
        labelSize: '',
        labelSizeName: '',
        labelWay: '',
        labelWayName: '',
        equipmentGuide: '',
        equipmentImg: '',
        labelInstallImg: ''
      }
    }
  },
  mounted() {
    this.query()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    formatStyle(data) {
      if (data.level < 2) {
        return 'color:#252525;font-size:16px;font-weight:500'
      } else if (data.level == 2) {
        return 'color:#252525;font-size:14px;font-weight:500'
      } else {
        return 'color:#666666;font-size:14px'
      }
    },
    query() {
      getBaseEquipmentType({}).then(res => {
        this.data = res.resultData
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    contextmenu(event, data, node, detail) {
      this.treeRightMenu = { top: event.pageY - 40 + 'px', left: event.pageX + 15 + 'px' }
      this.tmDisplay = true
      this.rightSelectData = data
      const self = this
      document.onclick = function(ev) {
        if (ev.target !== document.getElementById('perTreeMenu')) {
          self.tmDisplay = false
        }
      }
    },
    nodeClick(data, node, detail) {
      this.chooseData = data

      if (data.level != 3) {
        this.detailData = {
          moduleNum: 0,
          classifyNum: 0,
          typeNum: 0,
          equipmentNum: 0
        }
        queryDetailById({ parentId: data.parentId, id: data.id }).then(res => {
          this.detailData = {
            moduleNum: res.resultData.moduleNum,
            classifyNum: res.resultData.classifyNum,
            typeNum: res.resultData.typeNum,
            equipmentNum: res.resultData.equipmentNum
          }
        })
      } else {
        queryEquipmentDetailById({ equipmentTypeId: this.chooseData.id }).then(res => {
          const data = res.resultData
          this.equipmentForm = {
            name: data.name,
            model: data.model,
            modelName: data.modelName,
            equipmentTypeId: data.equipmentTypeId,
            parentId: data.parentId,
            category: data.category,
            labelType: data.labelType,
            labelTypeName: data.labelTypeName,
            installMethod: data.installMethod,
            installMethodName: data.installMethodName,
            labelSize: data.labelSize,
            labelSizeName: data.labelSizeName,
            labelWay: data.labelWay,
            labelWayName: data.labelWayName,
            equipmentGuide: data.equipmentGuide,
            equipmentImg: data.equipmentImg,
            labelInstallImg: data.labelInstallImg
          }
        })
      }
    },
    onSetStop(data) {
      this.$confirm('确认停用此器材?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        setEquipmentStop({ id: data.id }).then(res => {
          this.$message({ type: 'success', message: '操作成功' })
          this.query()
        })
      })
    },
    onAddType(data) {
      this.dataForm = {
        name: '',
        parentId: data.id
      }
      this.typeDialogTitle = '新增器材分类'
      this.typeDialogVisible = true
    },
    onAdd(data) {
      this.addEquipmentForm = {
        name: '',
        model: '',
        modelName: '',
        parentId: this.rightSelectData.id,
        category: '',
        labelType: '',
        labelTypeName: '',
        installMethod: '',
        installMethodName: '',
        labelSize: '',
        labelSizeName: '',
        labelWay: '',
        labelWayName: '',
        equipmentGuide: '',
        equipmentImg: '',
        labelInstallImg: ''
      }
      this.equipmentDialogTitle = '新增器材'
      this.equipmentDialogVisible = true
    },
    saveTypeData() {
      const _this = this
      this.$refs['typeRuleForm'].validate((valid) => {
        if (valid) {
          addEquipmentType(this.dataForm).then(response => {
            if (response.success) {
              _this.$message({
                message: '新增成功',
                type: 'success'
              })
              _this.typeDialogVisible = false
              _this.query()
            }
          })
        } else {
          return false
        }
      })
    },
    saveData() {
      this.equipmentDialogVisible = false
      this.query()
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';

.root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 104px);

  .tree-right-menu {
    position: fixed;
    display: block;
    z-index: 20000;
    //background-color: #fff;
    //padding: 5px 0;
    //border: 1px solid #ebeef5;
    //border-radius: 4px;
    //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  }

  .content-info {
    div {
      line-height: 24px;
      font-size: 14px;
      color: $contentTextColor;
    }

    div:first-child {
      font-weight: 500;
      font-size: 16px;
      color: $titleTextColor;
    }
  }
}
</style>
